@mixin clearfix {
  &:before, &:after { content: " "; display: table; }
  &:after { clear: both; }
}

@mixin single-transition($property:all, $speed:300ms, $ease:ease-in-out) {
  transition: $property $speed $ease;
}

@mixin tranlate2d($horizontal, $vertical){
  -ms-transform: translate($horizontal, $vertical);
  -webkit-transform: translate( $horizontal, $vertical);
  transform: translate($horizontal, $vertical);
}

@mixin rotate($degree){
	-ms-transform: rotate($degree);
	-webkit-transform: rotate($degree);
	transform: rotate($degree);
}

// use this to create isosceles triangles
// $triangle-size - 6px, 8px, 1em, 2.5em...
// $triangle-color - #333, rgba(0,0,0,0.25)...
// $triangle-direction - Options: top, bottom, left, right
@mixin css-triangle($triangle-size, $triangle-color, $triangle-direction) {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border: inset $triangle-size;
  @if ($triangle-direction == top) {
    border-color: $triangle-color transparent transparent transparent;
    border-top-style: solid;
  }
  @if ($triangle-direction == bottom) {
    border-color: transparent transparent $triangle-color transparent;
    border-bottom-style: solid;
  }
  @if ($triangle-direction == left) {
    border-color: transparent transparent transparent $triangle-color;
    border-left-style: solid;
  }
  @if ($triangle-direction == right) {
    border-color: transparent $triangle-color transparent transparent;
    border-right-style: solid;
  }
}